<template>
  <el-dialog
    ref="dialog"
    :title="title"
    :visible.sync="dialogVisible"
    width="65%"
    class="dialog"
    :fullscreen="true"
    :modal-append-to-body="true"
    :append-to-body="true"
    @open="handleBeforeOpen"
    @closed="handleClosed"
  >
    <el-steps :active="step" finish-status="success" simple style="margin-top: 20px">
      <el-step title="基本信息" />
      <el-step title="选择节目" />
      <!-- <el-step title="选择设备" /> -->
    </el-steps>

    <el-row>
      <el-col :span="!rightPanelCollapse ? 17 : 24">
        <step1
          ref="step1"
          v-model="ownBasicInfo"
          :step="step"
          :dict-type="dictType"
          :dict-waye="dictWay"
          :dict-play-mode="dictPlayMode"
          style="margin-top: 6px;"
        />
        <step2
          ref="step2"
          v-model="ownSelectedPlayProgramList"
          :step="step"
          style="margin-top: 8px;"
        />
        <!-- <step3
          ref="step3"
          v-model="ownSelectedDeviceList"
          :step="step"
          style="margin-top: 8px;"
        /> -->
      </el-col>
      <el-col v-show="!rightPanelCollapse" :span="!rightPanelCollapse ? 7 : 0" class="info-wrapper">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>频道信息</span>
          </div>
          <div>{{ $t('equipment.channelName') + `：${ownBasicInfo.name || '未输入'}` }}</div>
          <div>{{ $t('equipment.channelType') + `：${getLabelByVal(dictType, ownBasicInfo.type) || '未输入'}` }}</div>
          <div v-if="ownBasicInfo.type !== '0'">{{ `播放日期：${ownBasicInfo.startDateTime || '未输入'}` }}</div>
          <div v-if="ownBasicInfo.type !== '0'">{{ `播放时间：${ownBasicInfo.endDateTime || '未输入'}` }}</div>
          <div>{{ `下载时间：${ownBasicInfo.dloadTime || '未输入'}` }}</div>
          <div v-if="ownBasicInfo.type !== '0'">{{ `播放周次：${ownBasicInfo.playWeeks || '未输入'}` }}</div>
          <div>{{ `播放模式：${getLabelByVal(dictPlayMode,ownBasicInfo.playMode) || '未输入'}` }}</div>
          <!--<div>{{ `发布方式：${getLabelByVal(dictWay,ownBasicInfo.way) || '未输入'}` }}</div>-->
        </el-card>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>选择的节目（已选：{{ ownSelectedPlayProgramList.length }}）</span>
          </div>
          <div class="program-wrapper">
            <el-table
              :data="ownSelectedPlayProgramList"
              height="402"
              style="width: 100%;"
            >
              <el-table-column :label="$t('equipment.programName')" prop="name" header-align="center" align="center" :show-overflow-tooltip="true" />
              <el-table-column label="时长(s)" prop="duration" header-align="center" align="center" />
              <el-table-column :label="$t('equipment.control')" width="180px" header-align="center" align="center">
                <template slot-scope="scope">
                  <div class="operation">
                    <svg-icon icon-class="arrow-up" @click="handleUp(scope)" />
                    <svg-icon icon-class="arrow-down" @click="handleDown(scope)" />
                    <el-button size="mini" @click="handleDelete(scope)">删除</el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
        <!-- <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>选择的设备（已选：{{ ownSelectedDeviceList.length }}）</span>
          </div>
          <div class="device-wrapper">
            <el-table
              :data="ownSelectedDeviceList"
              height="230"
              style="width: 100%;"
            >
              <el-table-column :label="$t('equipment.name')" prop="name" header-align="center" align="center" :show-overflow-tooltip="true" />
              <el-table-column :label="$t('equipment.resolving')" prop="resolution" header-align="center" align="center" :show-overflow-tooltip="true" />
              <el-table-column :label="$t('equipment.control')" width="180px" header-align="center" align="center">
                <template slot-scope="scope">
                  <div class="operation">
                    <el-button size="mini" @click="handleDeviceDelete(scope)">删除</el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card> -->
      </el-col>
    </el-row>
    <div class="dialog-footer">
      <el-button
        v-if="step > 0"
        @click="handleClickPre"
      >上一步
      </el-button>
      <el-button
        v-if="step < 1"
        type="primary"
        @click="handleClickNext"
      >下一步
      </el-button>
      <el-button
        v-if="step > 0"
        type="primary"
        @click="handleClickSave"
      >提交
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { idxOf, getLabelByVal } from '@/utils/obj-util'
import Step1 from './step1.vue'
import Step2 from './step2.vue'
// import Step3 from './step3.vue'

export default {
  name: 'Publish',
  components: {
    Step1,
    Step2
  },
  model: {
    prop: 'visible',
    event: 'vmu'
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: null
    },
    basicInfo: {
      type: Object,
      default: () => {
      }
    },
    selectedPlayProgramList: {
      type: Array,
      default: () => []
    },
    selectedDeviceList: {
      type: Array,
      default: () => []
    },
    // 判断是新增 还是编辑
    clickBtn: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      getLabelByVal,
      dictType: [
        { label: '0', text: '默认' },
        { label: '1', text: '轮播' },
        { label: '2', text: '插播' }
      ],
      dictPlayMode: [
        { label: '0', text: '本地播放' },
        { label: '1', text: '在线播放' }
      ],
      dictWay: [
        { label: '0', text: '默认' },
        { label: '1', text: '广告' },
        { label: '2', text: '其他' }
      ],
      step: 0,
      rightPanelCollapse: false
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('vmu', val)
      }
    },
    ownBasicInfo: {
      get() {
        return this.basicInfo
      },
      set(val) {
        this.$emit('update:basicInfo', val)
      }
    },
    ownSelectedDeviceList: {
      get() {
        return this.selectedDeviceList
      },
      set(val) {
        this.$emit('update:selectedDeviceList', val)
      }
    },
    ownSelectedPlayProgramList: {
      get() {
        return this.selectedPlayProgramList
      },
      set(val) {
        this.$emit('update:selectedPlayProgramList', val)
      }
    }
  },
  watch: {
    ownBasicInfo: {
      deep: true,
      immediate: true,
      handler: function(nVal, oVal) {
        this.$forceUpdate()
      }
    },
    dialogVisible(val) {
      if (val) {
        // 如果是新增，给一些字段设置默认值
        if (this.clickBtn === 'ADD') {
          const d = new Date()
          const year = d.getFullYear()
          const month = (d.getMonth() + 1 < 10 ? '0' + (d.getMonth() + 1) : d.getMonth() + 1)
          const date = (d.getDate() < 10 ? '0' + d.getDate() : d.getDate())
          const hour = (d.getHours() < 10 ? '0' + d.getHours() : d.getHours())
          const minute = (d.getMinutes() < 10 ? '0' + d.getMinutes() : d.getMinutes())
          const second = d.getSeconds() < 10 ? '0' + d.getSeconds() : d.getSeconds()
          const times = year + '' + month + date + hour + minute + second
          this.ownBasicInfo.name = '频道-' + times + (Math.floor(Math.random() * (99 - 10)) + 10)
          this.ownBasicInfo.type = '1'
          this.ownBasicInfo.endDateTime = [
            '00:00:00',
            '23:59:59'
          ]
          for (let i = 0; i < 7; i++) {
            this.ownBasicInfo.playWeeks.push('' + i)
          }
          this.nowDown = true
          this.ownBasicInfo.dloadTime = this.parseTime(new Date())
        }
      }
    }
  },
  created() {
    this.reset()
  },
  methods: {
    reset() {
      this.step = 0
      this.ownBasicInfo = {
        name: '',
        type: '0',
        startDateTime: null,
        endDateTime: null,
        dloadTime: null,
        playWeeks: [],
        playMode: '0',
        way: '0',
        nowDown: true,
        delData: ''
      }
      this.ownSelectedPlayProgramList = []
      this.ownSelectedDeviceList = []
      this.rightPanelCollapse = false
      if (this.$refs.step2) {
        this.$refs.step2.reset()
      }
    },
    handleUp(scope) {
      const idx = idxOf(this.ownSelectedPlayProgramList, scope.row, 'id')
      if (idx > 0) {
        this.ownSelectedPlayProgramList.splice(idx, 1)
        this.ownSelectedPlayProgramList.splice(idx - 1, 0, scope.row)
      }
    },
    handleDown(scope) {
      const idx = idxOf(this.ownSelectedPlayProgramList, scope.row, 'id')
      if (idx < this.ownSelectedPlayProgramList.length - 1) {
        this.ownSelectedPlayProgramList.splice(idx, 1)
        this.ownSelectedPlayProgramList.splice(idx + 1, 0, scope.row)
      }
    },
    handleDelete(scope) {
      const idx = idxOf(this.ownSelectedPlayProgramList, scope.row, 'id')
      this.$refs.step2.removeSelection(idx)
    },
    handleDeviceUp(scope) {
      const idx = idxOf(this.ownSelectedDeviceList, scope.row, 'id')
      if (idx > 0) {
        this.ownSelectedDeviceList.splice(idx, 1)
        this.ownSelectedDeviceList.splice(idx - 1, 0, scope.row)
      }
    },
    handleDeviceDown(scope) {
      const idx = idxOf(this.ownSelectedDeviceList, scope.row, 'id')
      if (idx < this.ownSelectedDeviceList.length - 1) {
        this.ownSelectedDeviceList.splice(idx, 1)
        this.ownSelectedDeviceList.splice(idx + 1, 0, scope.row)
      }
    },
    handleDeviceDelete(scope) {
      // 编辑时记录删除的设备
      if (this.ownBasicInfo.id) {
        if (this.ownBasicInfo.delData) {
          this.ownBasicInfo.delData = ',' + scope.row.code
        } else {
          this.ownBasicInfo.delData = scope.row.code
        }
      }
      const idx = idxOf(this.ownSelectedDeviceList, scope.row, 'id')
      this.$refs.step3.removeSelection(idx)
    },
    handleClickPre() {
      if (this.step > 0) {
        this.step -= 1
        const el = this.$refs.dialog.$el.querySelector('.el-dialog')
        el.scrollTo(0, 0)
      }
    },
    handleClickNext() {
      if (this.step > 1) {
        return
      }
      if (this.step === 0) {
        this.$refs.step1.$refs.form.validate(valid => {
          if (valid) {
            this.step += 1
            const el = this.$refs.dialog.$el.querySelector('.el-dialog')
            el.scrollTo(0, 0)
          }
        })
        this.$refs.step2.handleSearch()
      } else if (this.step === 1) {
        if (this.ownSelectedPlayProgramList.length > 0) {
          this.step += 1
          const el = this.$refs.dialog.$el.querySelector('.el-dialog')
          el.scrollTo(0, 0)
        } else {
          this.$message.warning('至少选择一个节目')
        }
      }
    },
    handleClose(it) {
      const idx = idxOf(this.ownSelectedDeviceList, it, 'id')
      this.$refs.step3.removeSelection(idx)
    },
    handleClickSave() {
      // if (this.ownSelectedDeviceList.length === 0) {
      //   this.$message.warning(this.$t('terminal.atLeastOnce'))
      //   return
      // }
      if (this.ownSelectedPlayProgramList.length === 0) {
        this.$message.warning('至少选择一个节目')
        return
      }
      this.$emit('save')
    },
    handleBeforeOpen() {
    },
    handleClosed() {
      this.reset()
    }
  }
}
</script>

<style lang="scss" scoped>
  .dialog {
    /deep/ .el-dialog {
      overflow: auto;

      .el-dialog__body {
        padding: 0;

        .el-steps {
          margin-top: 0 !important;
        }

        .info-wrapper {
          height: 100%;
          overflow: auto;
          /*> .el-card {
            overflow: auto;
            &:nth-of-type(2) {
              max-height: 260px;
            }
            &:nth-of-type(3) {
              max-height: 260px;
            }
          }*/
        }

        .box-card {
          margin: 8px;
          width: calc(100% - 16px);
        }
      }

      /deep/ .dialog-footer {
        position: fixed;
        top: calc(100vh - 50px);
        text-align: center;
        width: 100%;

        &:after {
          content: "";
          display: block;
          clear: both;
        }
      }
    }

    .operation {
      fill: #1f2d3d;

      > svg {
        cursor: pointer;
        margin-right: 6px;
      }
    }
  }
</style>
